<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>菜品详细页</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport">
    <!-- Mobile Devices Support @begin -->
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
    <meta content="no-cache" http-equiv="pragma">
    <meta content="0" http-equiv="expires">
    <meta content="telephone=no, address=no" name="format-detection">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- apple devices fullscreen -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <!-- Mobile Devices Support @end -->
    <link rel="stylesheet" type="text/css" href="FortAwesome/docs/assets/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript">
        var _global = {};
        _global.spm = {};

        document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
            WeixinJSBridge.call('hideToolbar');
        });
    </script>
    <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".dci").click(function () {
                $(this).toggleClass("selected");
            });
        });
    </script>
</head>

<body>

<div class="body">
    <div class="topsearch">
        <form class="clearfix">
            <input type="button" onclick="searchFood()" class="sbtn icon-search">
            <input type="text" name="keys" id="keys" class="stxt" onfocus="if (value==defaultValue)value=''"
                   onblur="if(!value)value=defaultValue" value="寻找菜品、店面">
            <a href="order.html" title="我的订单" class="floatr"></a>
        </form>
    </div><!--topsearch-->
    <div class="container">
        <ul class="assort clearfix">
            <li class="ast1 floatl ast-cur"><a href="#">全部<i class="icon-caret-down"></i></a></li>
            <li class="ast2 floatl"><a href="foodlist.html" onclick="showType(0)">特色菜<i class="icon-caret-down"></i></a></li>
            <li class="ast3 floatl"><a href="foodlist.html" onclick="showType(1)">店长推荐<i class="icon-caret-down"></i></a></li>
            <li class="ast4 floatl"><a href="foodlist.html" onclick="showType(2)">精品上市<i class="icon-caret-down"></i></a></li>
        </ul><!--assort-->
        <div class="food-content">
            <h3 class="fn-tit"><a href="javascript:history.go(-1);" class="nback">返回</a><b class="tit" id="myordername">惠心上品斑鱼火锅</b>
            </h3>
            <div class="fn-img"><img id="myimage" src="images/cppic.jpg" alt="菜品图片"></div>
            <div class="fn-intro">
                <p>单价：<b>￥38</b><span class="fts orange">VIP：￥0.1</span></p>
                <p>制作时间：<b>10分钟</b><span>可获积分：<b>380分</b></span></p>
                <p>特点：<b>鲜嫩可口,回味无穷~</b></p>
                <p class="btn fts clearfix"><a href="order.html" id="orderFood" class="floatl">点菜</a><i
                        class="icon-ok floatl dci"></i></p>
            </div><!--fn-intro-->
            <h2 class="comment-tit clearfix"><b class="floatl">客户评价</b><a href="#cform" class="floatr"><i
                    class="icon-comment"></i>我要评价</a></h2>
            <ul class="comment-list" id="clist">
                <li>
                    <h4><i class="icon-comment-alt"></i><span>蓝君言</span><em>5分钟前</em></h4>
                    <p>这个菜我每次必点，绝对的好吃~</p>
                </li>
                <li>
                    <h4><i class="icon-comment-alt"></i><span>蓝君言</span><em>5分钟前</em></h4>
                    <p>这个菜我每次必点，绝对的好吃~</p>
                </li>
                <li>
                    <h4><i class="icon-comment-alt"></i><span>蓝君言</span><em>5分钟前</em></h4>
                    <p>这个菜我每次必点，绝对的好吃~</p>
                </li>
                <li>
                    <h4><i class="icon-comment-alt"></i><span>蓝君言</span><em>5分钟前</em></h4>
                    <p>这个菜我每次必点，绝对的好吃~</p>
                </li>
                <li>
                    <h4><i class="icon-comment-alt"></i><span>蓝君言</span><em>5分钟前</em></h4>
                    <p>这个菜我每次必点，绝对的好吃~</p>
                </li>
                <li>
                    <h4><i class="icon-comment-alt"></i><span>蓝君言</span><em>5分钟前</em></h4>
                    <p>这个菜我每次必点，绝对的好吃~</p>
                </li>
                <li>
                    <h4><i class="icon-comment-alt"></i><span>蓝君言</span><em>5分钟前</em></h4>
                    <p>这个菜我每次必点，绝对的好吃~</p>
                </li>
            </ul>
            <h2 class="comment-tit clearfix" id="cform"><b class="floatl">我要评价</b><a href="#clist" class="floatr"><i
                    class="icon-comment"></i>看看别人的评价</a></h2>
            <form class="comment-form">
                <p><input type="text" placeholder="昵称" id="mynickname"></p>
                <p><textarea rows="4" name="xuqiu" id="mycontent" placeholder="请输入您的评价"></textarea></p>
                <p>
                    <button type="button" id="insertComment" class="orange-btn">提 交</button>
                </p>
            </form>
        </div><!--food-content-->

    </div><!--container-->
    <!--下导航-->
    <div class="js-navmenu nav-on-bottom style-2">
        <div class="nav-menu has-menu-3"><a href="/index.html" class="icon-home"></a>
            <div class="divide">&nbsp;</div>
            <div class="one"><a class="mainmenu js-mainmenu" href="javascript:void(0);"> <i class="arrow-weixin"></i> 菜品
            </a>
                <div class="submenu js-submenu"><span class="arrow before-arrow"></span> <span
                        class="arrow after-arrow"></span>
                    <ul>
                        <li><a href="foodlist.html" onclick="showChileType(0)"> 火锅 </a></li>
                        <li><a href="foodlist.html" onclick="showChileType(1)"> 地方菜 </a></li>
                        <li><a href="foodlist.html" onclick="showChileType(2)"> 西餐 </a></li>
                        <li><a href="foodlist.html" onclick="showChileType(3)"> 快餐 </a></li>
                    </ul>
                </div>
            </div>
            <div class="divide">&nbsp;</div>
            <div class="one"><a class="mainmenu js-mainmenu" href="javascript:void(0);"> <i class="arrow-weixin"></i> 订位
            </a>
                <div class="submenu js-submenu"><span class="arrow before-arrow"></span> <span
                        class="arrow after-arrow"></span>
                    <ul>
                        <li><a href="foodlist.html"> 我要订位 </a></li>
                        <li><a href="membercenter.html"> 会员中心 </a></li>
                    </ul>
                </div>
            </div>
            <div class="divide">&nbsp;</div>
            <div class="one"><a class="mainmenu js-mainmenu" href="javascript:void(0);"> <i class="arrow-weixin"></i>
                VIP </a>
                <div class="submenu js-submenu"><span class="arrow before-arrow"></span> <span
                        class="arrow after-arrow"></span>
                    <ul>
                        <li><a href="register.html"> 我要成为VIP </a></li>
                        <li><a href="score.html"> 积分兑换 </a></li>
                    </ul>
                </div>
            </div>
            <div class="divide">&nbsp;</div>
            <div class="one"><a class="mainmenu js-mainmenu" href="javascript:void(0);"> <i class="arrow-weixin"></i> 订单
            </a>
                <div class="submenu js-submenu"><span class="arrow before-arrow"></span> <span
                        class="arrow after-arrow"></span>
                    <ul>
                        <li><a href="ordering.html"> 我的订单 </a></li>
                    </ul>
                </div>
                <!--submenu js-submenu-->
            </div>
            <!--one-->
        </div>
    </div>
    <!--nav-on-bottom下导航结束-->
</div><!--body-->

<script type="text/javascript">
    $("#insertComment").click(function(){
        $.ajax({
            "url":"/comment/reg",
            "data":{
                id:window.location.href.split("?")[1].replace(/[^0-9]/ig, ""),
                nickName:$("#mynickname").val(),
                content:$("#mycontent").val()
            },
            "dataType":"json",
            "type":"post",
            "success":function (json) {
                if (json.state==200){
                    alert("感谢您的精彩评论！！！")
                    location.reload();  //实现页面重新加载
                    // window.location.href("foodcontent.html?id="+window.location.href.split("?")[1].replace(/[^0-9]/ig, ""))
                }
            }
        })
    })

    id = window.location.href.split("?")[1]
    id = id.replace(/[^0-9]/ig, "")
    console.log(id)

    $('#orderFood').attr('href', 'order.html?id=' + id);


    $(document).ready(function () {
        showDetails()
        showComments()
    })

    function showDetails() {
        $(".fn-intro").empty()
        $.ajax({
            url: "/dishes/byId?" + window.location.href.split("?")[1],
            dataType: "json",
            type: "get",
            success: function (json) {
                if (json.state == 200) {
                    result = json.data
                    $("#myimage").attr("src", result.image)
                    $("#myordername").html(result.name)
                    html =
                        `
                    <p>单价：<b>￥38</b><span class="fts orange">VIP：￥#{discount}</span></p>
                    <p>制作时间：<b>#{time}分钟</b><span>可获积分：<b>#{score}分</b></span></p>
                    <p>特点：<b>#{special}</b></p>
                    <p class="btn fts clearfix"><a href="order.html" id="orderFood" class="floatl">点菜</a><i
                class="icon-ok floatl dci"></i></p>
                    `
                    html = html.replace(/#{discount}/g, result.discount)
                    html = html.replace(/#{score}/g, result.getScore)
                    html = html.replace(/#{time}/g, result.makeTime)
                    html = html.replace(/#{special}/g, result.special)
                    $(".fn-intro").append(html)
                    $('#orderFood').attr('href', 'order.html?id=' + window.location.href.split("?")[1].replace(/[^0-9]/ig,""));


                }
            }
        })
    }

    function showComments() {
        $("#clist").empty()
        $.ajax({
            url:"/comment/list?id="+window.location.href.split("?")[1].replace(/[^0-9]/ig, ""),
            type:"get",
            dataType:"json",
            success:function (json) {
                if (json.state==200){
                    var result = json.data
                    console.log(result)
                    for (i in result) {
                        var html=
                            `
                <li>
                    <h4><i class="icon-comment-alt"></i><span>#{name}</span><em>#{createTime}</em></h4>
                    <p>#{content}</p>
                </li>

                            `
                    html = html.replace(/#{name}/g,result[i].nickname)
                        html = html.replace(/#{createTime}/g,result[i].createdTime)
                        html = html.replace(/#{content}/g,result[i].content)

                        $("#clist").append(html)

                    }
                }
            }
        })
    }

    // function insertComment() {
    //     $.ajax({
    //         "url":"/comment/reg",
    //         "data":{
    //             id:window.location.href.split("?")[1].replace(/[^0-9]/ig, ""),
    //             nickName:$("#mynickname").val(),
    //             content:$("#mycontent").val()
    //         },
    //         "dataType":"json",
    //         "type":"post",
    //         "success":function (json) {
    //             if (json.state==200){
    //                 // window.location.href("foodcont")
    //             }
    //         }
    //     })
    // }

    function showType(id) {
        $(".foodlist").empty()
        $.ajax({
            "url": "/dishes/type?type=" + id,
            "type": "get",
            "dataType": "json",
            "success": function (json) {
                console.log(json.data)
                var result = json.data;
                if (json.state == 200) {
                    console.log("hello")
                    var result = json.data;
                    console.log(result)
                }

                for (var i in result) {
                    var html =
                        `
      <li>
        <h3 class="tit"><a href="foodcontent.html">#{name}</a></h3>
        <div class="foodintro clearfix"> <a href="foodcontent.html" class="foodimg floatl"><img src="#{images}" alt="菜品图片"></a>
          <div class="foodcon floatl">
            <p>单价：<b>￥#{price}</b></p>
            <p class="fts orange">VIP：￥#{discount}</p>
            <p>制作时间：<b>#{mintue}分钟</b></p>
            <p>可获积分：<b>#{score}分</b></p>
            <p>特点：<b>鲜嫩可口</b></p>
            <p><b>回味无穷~</b></p>
            <p class="btn fts clearfix"><a href="foodcontent.html?id=#{id}" class="floatl orange-btn">点菜</a><i class="icon-ok floatl dci"></i></p>
          </div>
          <!--foodcon-->
                            </div>
                            <!--foodintro-->
                            <p class="fcomment clearfix"> <span class="floatl"><a href="#" name="flag=0" onclick="ToTop(#{id})" class="ttt" id="topNum"><i id="mytopNum" class="icon-thumbs-up ttt"></i>赞<em>#{topNum}</em></a></span> <span class="floatl"><a href="#"><i class="icon-comment"></i>评论<em>15</em></a></span> <span class="floatl" style="border-right:0; border-right:none;"><a href="#"><i class="icon-share-alt"></i>转发</a></span> </p>
                            #{type} </li>

                            `


                    html = html.replace(/#{name}/g, result[i].name)
                    html = html.replace(/#{id}/g, result[i].id)
                    html = html.replace(/#{price}/g, result[i].price)
                    html = html.replace(/#{discount}/g, result[i].discount)
                    html = html.replace(/#{mintue}/g, result[i].makeTime)
                    html = html.replace(/#{score}/g, result[i].getScore)
                    html = html.replace(/#{topNum}/g, result[i].topNum)
                    html = html.replace(/#{images}/g, result[i].image)
                    if (result[i].type == 0) {
                        html = html.replace(/#{type}/g, '<em class="lt ltred">特色<br>推荐</em>'
                        )
                    } else if (result[i].type == 1) {
                        html = html.replace(/#{type}/g, '<em class="lt ltorange">店长<br>推荐</em>'
                        )

                    } else {
                        html = html.replace(/#{type}/g, '<em class="lt ltgreen">新品<br>上市</em>')

                    }

                    html = html.replace(/#{type}/g, result[i].special)
                    // html=html.replace(/#sum/g,result[i].num*result[i].price)
                    $(".foodlist").append(html)
                }
            }
        })

    }



        function searchFood() {
            $.ajax({
                "url": "/dishes/search?name=" + $("#keys").val(),
                "type": "get",
                "dataType": "json",
                "success": function (json) {
                    if (json.state == 200) {
                        result = json.data

                        $(".foodlist").empty()
                        for (var i in result) {
                            var html =
                                `
                        <li>
                        <h3 class="tit"><a href="foodcontent.html">#{name}</a></h3>
                        <div class="foodintro clearfix"> <a href="foodcontent.html" class="foodimg floatl"><img src="#{images}" alt="菜品图片"></a>
                        <div class="foodcon floatl">
                        <p>单价：<b>￥#{price}</b></p>
                        <p class="fts orange">VIP：￥#{discount}</p>
                        <p>制作时间：<b>#{mintue}分钟</b></p>
                        <p>可获积分：<b>#{score}分</b></p>
                        <p>特点：<b>鲜嫩可口</b></p>
                        <p><b>回味无穷~</b></p>
                        <p class="btn fts clearfix"><a href="foodcontent.html?id=#{id}" class="floatl orange-btn">点菜</a><i class="icon-ok floatl dci"></i></p>
                        </div>
                        <!--foodcon-->
                        </div>
                        <!--foodintro-->
                        <p class="fcomment clearfix"> <span class="floatl"><a href="#" name="flag=0" onclick="ToTop(#{id})" class="ttt" id="topNum"><i id="mytopNum" class="icon-thumbs-up ttt"></i>赞<em>#{topNum}</em></a></span> <span class="floatl"><a href="#"><i class="icon-comment"></i>评论<em>15</em></a></span> <span class="floatl" style="border-right:0; border-right:none;"><a href="#"><i class="icon-share-alt"></i>转发</a></span> </p>
                        #{type} </li>

                        `


                            html = html.replace(/#{name}/g, result[i].name)
                            html = html.replace(/#{id}/g, result[i].id)
                            html = html.replace(/#{price}/g, result[i].price)
                            html = html.replace(/#{discount}/g, result[i].discount)
                            html = html.replace(/#{mintue}/g, result[i].makeTime)
                            html = html.replace(/#{score}/g, result[i].getScore)
                            html = html.replace(/#{topNum}/g, result[i].topNum)
                            html = html.replace(/#{images}/g, result[i].image)
                            if (result[i].type == 0) {
                                html = html.replace(/#{type}/g, '<em class="lt ltred">特色<br>推荐</em>'
                                )
                            } else if (result[i].type == 1) {
                                html = html.replace(/#{type}/g, '<em class="lt ltorange">店长<br>推荐</em>'
                                )

                            } else {
                                html = html.replace(/#{type}/g, '<em class="lt ltgreen">新品<br>上市</em>')

                            }

                            html = html.replace(/#{type}/g, result[i].special)
                            // html=html.replace(/#sum/g,result[i].num*result[i].price)
                            $(".foodlist").append(html)
                        }
                    }
                }
            })
        }


        function showChileType(id) {
            $(".foodlist").empty()
            $.ajax({
                "url": "/dishes/childType?childType=" + id,
                "type": "get",
                "dataType": "json",
                "success": function (json) {
                    console.log(json.data)
                    var result = json.data;
                    if (json.state == 200) {
                        console.log("hello")
                        var result = json.data;
                        console.log(result)
                    }

                    for (var i in result) {
                        var html =
                            `
                        <li>
                        <h3 class="tit"><a href="foodcontent.html">#{name}</a></h3>
                        <div class="foodintro clearfix"> <a href="foodcontent.html" class="foodimg floatl"><img src="#{images}" alt="菜品图片"></a>
                        <div class="foodcon floatl">
                        <p>单价：<b>￥#{price}</b></p>
                        <p class="fts orange">VIP：￥#{discount}</p>
                        <p>制作时间：<b>#{mintue}分钟</b></p>
                        <p>可获积分：<b>#{score}分</b></p>
                        <p>特点：<b>鲜嫩可口</b></p>
                        <p><b>回味无穷~</b></p>
                        <p class="btn fts clearfix"><a href="foodcontent.html?id=#{id}" class="floatl orange-btn">点菜</a><i class="icon-ok floatl dci"></i></p>
                        </div>
                        <!--foodcon-->
                        </div>
                        <!--foodintro-->
                        <p class="fcomment clearfix"> <span class="floatl"><a href="#" name="flag=0" onclick="ToTop(#{id})" class="ttt" id="topNum"><i id="mytopNum" class="icon-thumbs-up ttt"></i>赞<em>#{topNum}</em></a></span> <span class="floatl"><a href="#"><i class="icon-comment"></i>评论<em>15</em></a></span> <span class="floatl" style="border-right:0; border-right:none;"><a href="#"><i class="icon-share-alt"></i>转发</a></span> </p>
                        #{type} </li>

                        `


                        html = html.replace(/#{name}/g, result[i].name)
                        html = html.replace(/#{id}/g, result[i].id)
                        html = html.replace(/#{price}/g, result[i].price)
                        html = html.replace(/#{discount}/g, result[i].discount)
                        html = html.replace(/#{mintue}/g, result[i].makeTime)
                        html = html.replace(/#{score}/g, result[i].getScore)
                        html = html.replace(/#{topNum}/g, result[i].topNum)
                        html = html.replace(/#{images}/g, result[i].image)
                        if (result[i].type == 0) {
                            html = html.replace(/#{type}/g, '<em class="lt ltred">特色<br>推荐</em>'
                            )
                        } else if (result[i].type == 1) {
                            html = html.replace(/#{type}/g, '<em class="lt ltorange">店长<br>推荐</em>'
                            )

                        } else {
                            html = html.replace(/#{type}/g, '<em class="lt ltgreen">新品<br>上市</em>')

                        }

                        html = html.replace(/#{type}/g, result[i].special)
                        // html=html.replace(/#sum/g,result[i].num*result[i].price)
                        $(".foodlist").append(html)
                    }
                }

            })
        }


</script>


<script type="text/javascript" src="js/wap.min.js"></script>
</body>
</html>